<template>
	<!-- 签名 -->
	<view class="sign-box">
		<view>
			<view :class="['sign-name']" @tap="toResign">
				<view>请{{ identity }}<text class="text-color-bold">{{ realName }}</text>书写您的签名</view>
				<view class="text-color-red" v-show="srcImageUrl">重新签名</view>
			</view>
			<view :class="['signImages']">
				<image v-show="srcImageUrl" id="signImg" mode="aspectFit" class="signImg" :src="srcImageUrl"
					@tap="previewImage(srcImageUrl)" />
				<view v-show="!srcImageUrl" class="sign-text" @tap="toResign">点击签名</view>
			</view>
			<view class="beizhu">备注：点击签名图片可查看大图</view>
		</view>
	</view>
	<!--此处是在实际页面页面中加，结合sign-canvas通过signVisible控制显示-->
	<!-- <sign-canvas v-if="signVisible" :realName="realName" :userInfo="userInfo" @signCancel="signCancel" @signConfirm="signConfirm"></sign-canvas> -->
</template>

<script>
/**
 * 签名图片展示组件
 */
import { PUBLIC } from "@/utils/common-func.js"; // 经常用到的公共方法
import { vsCode } from '@/utils/img-code.js'
export default {
	name: 'SignBox',
  props:{
    // 请申请人XXX书写您的签名
    // 身份
    identity:{
      type: String,
      default: ''
    },
    // 名称
    realName:{
      type: String,
      default: ''
    },
    // 文件id，用于保存和回显
    fileId: {
      type: [String, Number],
      default: ''
    },
		signImgPath: {
      type: [String],
      default: ''
    },
  },
  data() {
    return {
      signId: '',  //签名ID
			srcImageUrl:'',//签名图片
		}
  },
	mounted() {
    // this.signId = this.fileId
    // // 签名回显
		// if(this.signId){
		// 	this.getFileImg(this.signId)
		// }
		this.srcImageUrl = this.signImgPath
  },
  methods: {
		// 回显图片
		getFileImg(fileId) {
			let imageDownload = window?.LOCAL_CONFIG?.image_service_api ? window?.LOCAL_CONFIG?.image_service_api + '/file/obs/download': '/file/obs/download'
      vsCode.imgCode({
				url: imageDownload + '?fileId=' + fileId,
        method: 'GET',
				data: {},
			}).then( res => {
				// console.log('res04',res.data)
				let blob = new Blob([res.data]) // 返回的文件流数据 
        PUBLIC.blobToBase64(blob, (dataurl) => {
					this.srcImageUrl = dataurl // 转化为路径
				})
			})
    },
		// 图片预览
		previewImage(url) {
      // console.log(url,'url');
			uni.previewImage({
				current: url, // 当前显示图片的http链接
				urls: [url] // 需要预览的图片http链接列表
			})
		},
		// 跳转签名页面
		toResign(){
      this.$emit('toResign')
		},
  }
}
</script>
<style lang="scss" scoped src="./index.scss">
</style>